<template>
	<view class="storeCodeApplication">
		<!-- 假如状态是审核成功，则只展示数据 -->
		<view class="form_list" v-if="status==3">
			<view class="form_item">
				<view class="item_title">商户UID</view>
				<view class="item_con">{{alipayshopData.uid}}</view>
			</view>
			<view class="form_item">
				<view class="item_title">门店名称</view>
				<view class="item_con">{{alipayshopData.shop_name}}</view>
			</view>
			<view class="form_item">
				<view class="item_title">经营类目</view>
				<view class="item_con">{{alipayshopData.categoryName}}</view>
			</view>
			<view class="form_item">
				<view class="item_title">支付宝账号</view>
				<view class="item_con">{{alipayshopData.merchant_logon_id}}</view>
			</view>
			<view class="form_item" style="border: none;">
				<view class="item_title">门店码</view>
				<view class="item_con">{{alipayshopData.token}}</view>
			</view>
		</view>
		<!-- 假如是其他状态 -->
		<view v-else>
			<view class="form_list">
				<!-- 商户uid和选择门店假如状态是审核中或者审核失败，则不可编辑 -->
				<view class="form_item" v-if="status==2||status==4">
					<view class="item_title"><text class="redfont">*</text>商户UID</view>
					<view class="item_con">{{alipayshopData.uid}}</view>
				</view>
				<view class="form_item" v-else>
					<view class="item_title"><text class="redfont">*</text>商户UID</view>
					<view class="item_con">
						<input type="text" v-model="form.uid" placeholder="请输入商户UID" @blur="getShopinfo" />
					</view>
				</view>
				<view class="form_item" v-if="status==2||status==4">
					<view class="item_title">选择门店</view>
					<view class="item_con">{{alipayshopData.storeName}}</view>
				</view>
				<picker v-else mode="selector" :range="storeArr" :range-key="'shop_name'" @change="storeSel($event)">
					<view class="form_item">
						<view class="item_title">选择门店</view>
						<view class="item_con">
							<input type="text" :value="form.curStore?form.curStore.shop_name:''" disabled="true" />
						</view>
						<view class="item_size">
							<u-icon name="arrow-right" color="#cccccc" size="22"></u-icon>
						</view>
					</view>
				</picker>
				
				<view class="form_item">
					<view class="item_title">门店名称</view>
					<view class="item_con">
						<input type="text" v-model="form.shopName" placeholder="请输入门店名称" />
					</view>
				</view>
				<view class="form_item" style="border: none;" @click="categoryObj.show = true">
					<view class="item_title">经营类目</view>
					<view class="item_con">
						<input type="text" :value="categoryObj.categoryText" disabled="true" />
					</view>
					<view class="item_size">
						<u-icon name="arrow-right" color="#cccccc" size="22"></u-icon>
					</view>
				</view>
			</view>
			<view style="height: 30rpx;"></view>
			<view class="form_list">
				<view class="form_item">
					<view class="item_title"><text class="redfont">*</text>支付宝账号</view>
					<view class="item_con">
						<input type="text" v-model="form.merchantLogonId" placeholder="请输入支付宝账号" />
					</view>
				</view>
				<view class="form_item" style="border: none;">
					<view class="item_title"><text class="redfont">*</text>门店码</view>
					<view class="item_con">
						<input type="text" :value="form.codeToken" disabled="true" />
					</view>
					<view class="item_size" @click="scanCodeFun">
						<image src="../../static/img/ic_scancode.png"></image>
					</view>
				</view>
			</view>
			<view style="height: 55px;padding: 15px;">
				<text class="redfont" v-show="remark">提示:{{remark}}</text>
			</view>
			<view class="footer">
				<!-- 假如是审核中或审核失败则调用再次申请接口，否则调用门店码申请接口 -->
				<button type="primary" v-if="status==2||status==4" @click="applyshopcoderepeatFun">提交</button>
				<button type="primary" v-else @click="applyshopcodeFun(false)">提交</button>
			</view>
			
			<!-- 选择经营类目弹窗 -->
			<selectAuto ref="selectAuto" :title="'请选择经营类目'" :show="categoryObj.show" :column="3" :dataList="categoryObj.list" @getDatalist="getAlipaycategory" @dlcancel="categoryObj.show=false" @dlsure="dlsure"></selectAuto>
			<!-- 加载中提示弹窗 -->
			<loading :show="showLoading" :text="'商户升级中'"></loading>
		</view>
	</view>
</template>

<script>
	import { alipaycategory,applyshopcode,shopinfonolimit,alipayshoplist,applyshopcoderepeat } from '../../api/index.js'
	import selectAuto from '../../components/selectAuto/selectAuto.vue';
	import loading from '../../components/loading/loading.vue'
	export default {
		data() {
			return {
				remark:'', //失败原因
				status:'', //当前状态 3:审核成功 2:审核中 4:审核失败
				showLoading:false,//控制加载提示弹窗是否显示
				currentIndex:[],
				form:{
					uid:'',
					suid: '', //商户UID
					curStore: '', //选中的门店
					shopName:'',//门店名称
					curCategory:'', //当前选中的经营类目
					merchantLogonId: '',//支付宝账号
					codeToken: '', //门店码
				},
				storeArr:[],
				firstUid:'', //记录上一次请求选择门店的uid
				
				categoryObj:{
					show:false,
					list:[],
					categoryTar:[],
					categoryText:''
				},
				alipayshopData:{} //门店码详情
			}
		},
		onLoad:function(data){
			this.status = data.status
			if(data.status == 3 || data.status == 2 || data.status == 4){//假如状态是审核成功或审核中
				this.getAlipayshop(data.merchant_id);//获取门店码详情
			}
			//获取经营类目列表
			this.getAlipaycategory()
		},
		methods: {
			scanCodeFun:function(){
				let that = this;
				cm.scanCode({
					success:function(result){
						console.log(result)
						console.log("二维码扫码成功")
						if(!!result.code_url){
							let codeArr = result.code_url.split('/');
							that.form.codeToken = codeArr[codeArr.length-1];
						}
					},
					fail:function(res){
						console.log(res)
						console.log("二维码扫码失败")
					}
				});
			},
			//选择门店
			storeSel:function(e){
				this.form.curStore = this.storeArr[e.detail.value];
				this.form.shopName = this.form.curStore.shop_name;
			},
			//获取门店列表
			getShopinfo:function(){
				if(this.firstUid!==this.form.uid){
					this.form.curStore = [];
				}else{
					return ;
				}
				
				shopinfonolimit({
					uid:this.form.uid
				}).then((res) => {
					console.log(res)
					if(res.code == 0){
						this.storeArr = res.data;
						this.firstUid = this.form.uid;
					}else{
						this.storeArr = [];
					}
				}).catch((e) => {
					this.storeArr = [];
					console.log(e);
				})
			},
			//门店码申请
			applyshopcodeFun:function(isRepeat){
				let text = '';
				if(!this.form.uid){
					text = '请输入商户uid'
				}else if(!this.form.curStore){
					text = '请选择门店'
				}else if(!this.form.shopName){
					text = '请输入门店名称'
				}else if(!this.form.curCategory){
					text = '请选择经营类目'
				}else if(!this.form.merchantLogonId){
					text = '请输入支付宝账号'
				}else if(!this.form.codeToken){
					text = '请输入门店码'
				}
				if(!!text){
					uni.showToast({
						title: text,
						icon: 'none'
					})
					return ;
				}
				this.remark = '';
				applyshopcode({
					uid:this.form.uid,
					suid:this.form.curStore.id,//门店id
					shop_name:this.form.shopName,
					category_id:this.form.curCategory,//经营分类id
					merchant_logon_id:this.form.merchantLogonId,//支付宝账号
					code_token:this.form.codeToken //门店码
				}).then((data) => {
					console.log(data)
					if(data.code == 0){
						uni.showModal({
							title:'提示',
							content: data.msg,
							complete:function(){
								uni.navigateBack({})
							}
						})
						
					}else{
						uni.showToast({
							title: data.msg,
							icon: 'none'
						})
						this.remark = data.msg
					}
				}).catch((e)=>{
					console.log(e);
					if(e.code == 401){ //M3商户升级失败
						if(!isRepeat){ //判断是否重复加载
							this.showLoading = true
							setTimeout(()=>{
								this.applyshopcodeFun(true);
								this.showLoading = false
							},5000);
						}else{
							uni.showModal({
								title:'提示',
								content: e.msg,
								complete:function(){
									uni.navigateBack({})
								}
							})
						}
					}else{this.remark = e.msg}
				})
			},
			//获取经营类目列表
			async getAlipaycategory(item){
				const data = await alipaycategory({pid:item?item.id:''})
				this.categoryObj.list = data.data;
			},
			//确定选择经营类目
			dlsure:function(data){
				if(data.length==3 && data[data.length-1].id!=''){
					this.categoryObj.categoryTar = data;
					this.form.curCategory = data[2].id;
					this.categoryObj.categoryText = data[0].name+'-'+data[1].name+'-'+data[2].name
					this.categoryObj.show = false
				}else{
					uni.showToast({
						icon:'none',
						title:'请选择完整的类型'
					})
				}
			},
			//获取经营类目名称
			async getAlipaycategoryName(){
				const data = await alipaycategory({id:this.alipayshopData.category_id})
				this.$set(this.alipayshopData,'categoryName',data.data[0].name)
				
				// 赋予审核中与审核失败的申请页面历史值
				this.form.shopName = this.alipayshopData.shop_name;
				this.form.curCategory = this.alipayshopData.category_id;
				this.form.merchantLogonId = this.alipayshopData.merchant_logon_id;
				this.form.codeToken = this.alipayshopData.token;
				this.categoryObj.categoryText = this.alipayshopData.categoryName;
			},
			//获取门店列表名
			async getShopinfoName(){
				const data = await shopinfonolimit({uid:this.alipayshopData.uid})
				data.data.forEach((val,index,arr)=>{
					if(val.id == this.alipayshopData.suid){
						this.$set(this.alipayshopData,'storeName',val.shop_name)
					}
				})
			},
			//获取门店码详情
			getAlipayshop(merchant_id){
				alipayshoplist({
					status:this.status,
					merchant_id:merchant_id
				}).then((res)=>{
					console.log(res)
					this.alipayshopData = res.data[0]
					
					this.getAlipaycategoryName();//获取经营类目名称
					this.getShopinfoName();//获取选择门店名称
				})
			},
			//再次申请门店码(审核中提交)逻辑
			applyshopcoderepeatFun(){
				let text = '';
				if(!this.form.shopName){
					text = '请输入门店名称'
				}else if(!this.form.curCategory){
					text = '请选择经营类目'
				}else if(!this.form.merchantLogonId){
					text = '请输入支付宝账号'
				}else if(!this.form.codeToken){
					text = '请输入门店码'
				}
				if(!!text){
					uni.showToast({
						title: text,
						icon: 'none'
					})
					return ;
				}
				this.remark = '';
				applyshopcoderepeat({
					auto_id:this.alipayshopData.auto_id, //列表ID
					shop_name:this.form.shopName,//门店名称
					merchant_logon_id:this.form.merchantLogonId,//支付宝账号
					category_id:this.form.curCategory,//经营分类id
					code_token:this.form.codeToken //门店码
				}).then((data)=>{
					console.log(data)
					if(data.code == 0){
						uni.showModal({
							title:'提示',
							content: data.msg,
							complete:function(){
								uni.redirectTo({
									url:'../storeCode/storeCode'
								})
							}
						})
					}
				}).catch((e)=>{
					console.log(e)
					if(e.msg){
						this.remark = e.msg
					}
				})
			}
		},
		components:{
			selectAuto,
			loading
		}
	}
</script>

<style lang="scss" scoped>
	.storeCodeApplication{
		position: relative;
		height: 100%;
		background-color: #F5F5F5;
		.form_list{
			padding: 0 30rpx;
			background-color: #FFFFFF;
			&:nth-child(1){
				border-top: 1rpx solid #E5E5E5;
			}
			.form_item{
				display: flex;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #E5E5E5;
				.item_title{
					width: 25%;
					color: #999999;
				}
				.item_con{
					width: 70%;
					input{
						font-size: $uni-font-size-lg;
					}
				}
				.item_size{
					width: 5%;
					text-align: right;
					image{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
		.footer{
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			padding: 10rpx 30rpx 30rpx 30rpx;
			background-color: #FFFFFF;
			button{
				font-size: $uni-font-size-base;
			}
		}
	}
</style>
